const {
  resolve
} = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  entry: resolve(__dirname, 'src/index.js'),

  output: {
    filename: 'build.js',
    path: resolve(__dirname, 'build'),
    publicPath: './'
  },

  module: {
    rules: [{
        test: /\.less$/,
        //-- 使用多个Loader 用use
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
        ]
      },
      {
        //-- 问题：默认处理不了html中的img图片
        //-- 处理图片资源 
        test: /\.(jpg|png|gif)$/,
        //-- 使用一个loader 用loader
        //-- 需要下载二个loader url-loader file-loader
        loader: 'url-loader',
        options: {
          //-- 图片小于8kb base64处理
          //-- 优点 减少请求数量 减轻服务器压力
          //-- 缺点 图片体积变大 请求速度会慢
          limit: 16 * 1024,
          //-- 问题url-loader 默认 ES6模块解析 而html-loader 引入图片是commonjs
          //-- 解析时会出问题 [object]
          //-- 解决 关闭url-loader 的ES6模块 使用commonjs解析
          esModule: false,
          //-- 给图片 重命名
          //-- [hash:10] 取图片hash前10位
          //-- [ext]取文件原来的扩展名
          name: '[hash:10].[ext]'
        }

      },
      {
        test: /\.html$/,
        //-- 处理html文件的img图片 负责引入Img 从而被url-loader进行处理
        loader: 'html-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'src/index.html')
    })
  ],

  mode: 'development'
}